<template>
  <div class="option">
    <!-- 这是单选框 -->
    <van-radio-group v-if="type === 1">
      <van-cell-group>
        <van-cell
          clickable
          @click="one(index)"
          v-for="(item, index) in list"
          :key="index"
        >
          <div
            class="chebox"
            :class="[
              { active: result.includes(index) && newAnswer === null },
              {
                correct: newAnswer && newAnswer.includes(abc[index])
              },
              {
                error:
                  result.includes(index) &&
                  newAnswer &&
                  !newAnswer.includes(abc[index])
              }
            ]"
          >
            <p>{{ abc[index] }}.&nbsp;{{ item }}</p>
            <van-icon
              name="success"
              v-if="newAnswer && newAnswer.includes(abc[index])"
            />
            <van-icon
              name="cross"
              v-if="
                result.includes(index) &&
                newAnswer &&
                !newAnswer.includes(abc[index])
              "
            />
          </div>
          <template #right-icon>
            <van-radio :name="index" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <!-- 这是复选框 -->
    <van-checkbox-group v-model="result" v-if="type === 2">
      <van-cell-group>
        <van-cell
          v-for="(item, index) in list"
          clickable
          :key="index"
          @click="toggle(index)"
        >
          <div
            class="chebox"
            :class="[
              { active: result.includes(index) && newAnswer === null },
              {
                correct: newAnswer && newAnswer.includes(abc[index])
              },
              {
                error:
                  result.includes(index) &&
                  newAnswer &&
                  !newAnswer.includes(abc[index])
              },
              {
                null:
                  !result.includes(index) &&
                  newAnswer &&
                  newAnswer.includes(abc[index])
              }
            ]"
          >
            <p>{{ abc[index] }}.&nbsp;{{ item }}</p>
            <van-icon
              name="success"
              v-if="
                newAnswer &&
                newAnswer.includes(abc[index]) &&
                result.includes(index)
              "
            />
            <van-icon
              name="cross"
              v-if="
                result.includes(index) &&
                newAnswer &&
                !newAnswer.includes(abc[index])
              "
            />
          </div>
          <template #right-icon>
            <van-checkbox :name="index" ref="checkboxes" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
  </div>
</template>

<script>
export default {
  name: 'anyOption',
  props: {
    list: {
      type: Array
    },
    type: {
      type: Number,
      default: 1
    },
    answer: {
      default: null
    },
    value: {}
  },
  data () {
    return {
      result: [], // 复选框的值
      abc: ['A', 'B', 'C', 'D'] // 枚举
    }
  },
  watch: {
    result (newQuestion) {
      if (this.type === 1) {
        this.$emit('input', this.abc[newQuestion[0]])
      } else {
        let a = this.result.map((v) => {
          return this.abc[v]
        })
        if (a.length === 0) {
          a = undefined
        }
        this.$emit('input', a)
      }
    },
    list (newValue) {
      this.result = []
      this.$emit('update:answer', null)
    }
  },
  computed: {
    newAnswer () {
      let a
      if (typeof this.answer === 'string') {
        a = [this.answer]
      } else if (typeof this.answer === 'object') {
        a = this.answer
      } else {
        a = null
      }
      return a
    }
  },
  methods: {
    toggle (index) {
      if (!this.newAnswer) {
        this.$refs.checkboxes[index].toggle()
      }
    },
    one (index) {
      if (!this.newAnswer) {
        if (this.result[0] === index) {
          this.result.pop()
        } else {
          this.$set(this.result, 0, index)
        }
      }
    },
    set (val) {
      const arr = []
      for (let i = 0; i < val.length; i++) {
        const a = this.abc.indexOf(val[i])
        arr.push(a)
      }
      this.result = arr
    }
  },
  created () {}
}
</script>

<style lang="less">
.option {
  box-sizing: border-box;
  .van-icon.van-icon-success {
    display: none;
  }
  .van-cell__title {
    display: none;
  }
  .van-cell__value {
    text-align: left;
    overflow: visible;
  }
  .chebox {
    width: 9.2rem !important;
    &.active {
      background-color: #f2f2f2;
      border: 1px solid #b4b4bd !important;
    }
    &.correct {
      background-color: #ddfad9;
      color: #1dc779;
    }
    &.error {
      background-color: #ffefea !important;
    }
    // &.null {
    //   border: 2px solid #ffefea !important;
    // }
    box-sizing: border-box;
    width: 326px;
    min-height: 50px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #f7f4f5;
    padding: 0 15px 0 15px;
    display: flex;
    p {
      display: block;
      font-size: 16px;
      margin: auto 0;
      overflow: visible;
    }
    .van-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -8.5px;
      &.van-icon-success {
        color: #1dc779;
      }
      &.van-icon-cross {
        color: #ec6187;
      }
    }
  }
}
</style>
